<template>
	<view class="content">
		<u-navbar title="课程中心">
			<view slot="right" class="serach_icon">
				<u-icon name="search" size="28" @tap='serachCourseFn'></u-icon>
			</view>
		</u-navbar>
		<view class="top">
			<view class="top-menu">
				<!-- <u-sticky offset-top="0"> -->
				<view class="kong">
				</view>
				<view class="top-menu-content container">
					<view class="title" @click="selectTypeHandle(item.name)" v-for="(item,index) in courseBar"
						:key="index">
						<view class="name">
							{{item.name}}
						</view>
						<u-icon name="arrow-down" color="#c1c1c1" size="28"></u-icon>
					</view>
				</view>
				<!-- </u-sticky> -->
			</view>
			<!-- 下拉菜单开始 -->
			<u-mask :show="isShowDropdown" @click="isShowDropdown = false" :duration="0" z-index="100">
				<!-- <view class="warp"> -->
				<view class="slot-content" @tap.stop>
					<!-- 具体选项 -->
					<scroll-view scroll-y="true" style="height:auto;">
						<view class="mb-20">
							<view v-for="(outItem,outIndex) in courseBar" :key="outItem.name">
								<block v-if="type==outItem.name">
									<u-grid :col="4" :border="false" hover-class="none">
										<u-grid-item v-for="(tagItem, index) in outItem.items" :key="tagItem.id"
											:custom-style="{padding: '10rpx 0'}">
											<u-tag :text="tagItem.name" shape="circle"
												:bg-color="ids.includes(tagItem.id)?'#FCF0F0':'#F6F6F6'"
												:color="ids.includes(tagItem.id)?'#F4333C':'#858484'"
												border-color="transparent" @click="tagClickMore(tagItem.id)" />
										</u-grid-item>
									</u-grid>
								</block>

							</view>
							<!-- 类型-难度-部位 -->
							<!-- <u-grid :col="4" :border="false" hover-class="none" v-else>
								<u-grid-item v-for="(tagItem, index) in courseBar[type]" :key="tagItem.id"
									:custom-style="{padding: '10rpx 0'}">
									<u-tag :text="tagItem.name" shape="circle"
										:bg-color="tagItem.isSelect?'#FCF0F0':'#F6F6F6'"
										:color="tagItem.isSelect?'#F4333C':'#858484'" border-color="transparent"
										@click="tagClick(index,tagItem.id)" />
								</u-grid-item>
							</u-grid> -->
						</view>
					</scroll-view>
					<view class="select-button">
						<view class="reset-btn" @click="resetOptions">重置</view>
						<view class="confirm-btn" @click="confirmOptions">确认</view>
					</view>
				</view>
				<!-- </view> -->
			</u-mask>
		</view>

		<!-- 下拉菜单结束 -->
		<view class="right-sort">
			<!-- 获取排列方式 -->
			<view class="left" @tap="sortFn">
				<view class>排序</view>
				<u-icon name="arrow-down-fill" color="#bababa" size="6" top="4"></u-icon>
			</view>
			<view @tap="getArrangement" class="sort-icon">
				<u-icon name="list-dot" color="#bababa" size="50" top="4" v-if="showType"></u-icon>
				<u-icon name="grid-fill" color="#bababa" size="40" v-if="!showType"></u-icon>
			</view>
		</view>
		<u-popup class='paixu' v-model="showSort" mode="top"  :duration="0" z-index="99">
			<!-- 	<u-radio-group v-model="value_sort" 
			:wrap ='true'
			@change="radioGroupChange">
				<u-radio @change="radioChange" v-for="(item, index) in sortlist" :key="index" :name="item.name"
					:disabled="item.disabled">
					{{item.name}}
				</u-radio>
			</u-radio-group> -->
			<u-radio-group v-model="value_sort">
				<view class="" v-for="(item, index) in sortlist" :key="index">
					{{item.name}}
					<u-radio :name="item.name" @change="radioChange"></u-radio>
				</view>
			</u-radio-group>
		</u-popup>
		<view class="course-content">
			<!-- 第一种列表样式 -->
			<view class="" v-show="showType">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" @tap="toDetail(item.id)" v-for="(item, index) in leftList"
							:key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.coverPath" :index="index"
								height="10">
							</u-lazy-load> -->
							<div class="box_img">
								<image :src="item.coverPath" mode="aspectFill"></image>
							</div>
							<view class="course-list">
								<view class="demo-title">
									<!-- <view class="title"> -->
									{{item.seriesName}}
									<!-- </view> -->
								</view>
								<view class="desc-price">
									<view class="demo-price1" v-if="item.isCharge == '1'&&item.payStatus == 'UNPAID'">
										￥{{item.price}}
									</view>
									<view class="demo-price2" v-else-if="item.isCharge == '0'">
										免费
									</view>
									<view class="demo-price3" v-else>
										已购买
									</view>
									<view class="demo-person">
										{{item.learnNum}}人看过
									</view>
								</view>
								<view class="author">
									<u-avatar :src="item.expertFace" size="36"></u-avatar>
									<view class="author-name">
										{{item.expertName}}
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" @tap="toDetail(item.id)" v-for="(item, index) in rightList"
							:key="index">
							<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.coverPath" :index="index"
								height="200"></u-lazy-load> -->
								<div class="box_img">
									<image :src="item.coverPath" mode="aspectFill"></image>
								</div>
								
							<view class="course-list">
								<view class="demo-title">
									{{item.seriesName}}
								</view>
								<view class="desc-price">

									<view class="demo-price1" v-if="item.isCharge == '1'&&item.payStatus == 'UNPAID'">
										￥{{item.price}}
									</view>
									<view class="demo-price2" v-else-if="item.isCharge == '0'">
										免费
									</view>
									<view class="demo-price3" v-else>
										已购买
									</view>
									<view class="demo-person">
										{{item.courseWatchCount}}人看过
									</view>
								</view>
								<view class="author">
									<u-avatar :src="item.expertFace" size="36"></u-avatar>
									<view class="author-name">
										{{item.expertName}}
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<!-- 第二种样式 -->
			<view v-show="!showType">
				<view class="demo-warter2" v-for="(item, index) in flowList" :key="index" @tap="toDetail(item)">
					<image :src="item.coverPath" mode="" class="course-image2"></image>
					<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index" height="100" width="100">
					</u-lazy-load> -->
					<view class="course-list2">
						<view class="demo-title">
							<!-- <view class="title"> -->
							{{item.seriesName}}
							<!-- </view> -->
						</view>
						<view class="author2">
							<u-avatar :src="item.expertFace" size="36"></u-avatar>
							<view class="author-name">
								{{item.expertName}}
							</view>
						</view>
						<view class="desc-price">
							<view class="demo-person">
								{{item.courseWatchCount}}人看过
							</view>
							<view class="demo-price2" v-if="item.isCharge == '0'">
								免费
							</view>
							<view class="demo-price1" v-else-if="item.isCharge == '1'&&item.payStatus == 'UNPAID'">
								￥{{item.price}}
							</view>
							<view class="demo-price3" v-else>
								已购买
							</view>

						</view>

					</view>
				</view>
			</view>
			<!-- <view @click="addRandomData" class="view-more">
				{{ page > courseList.length ? "查看更多" : "没有更多了" }}
			</view> -->
			<view class="view-more">
				{{ page*rows < total ? "查看更多" : "没有更多了" }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		API
	} from '../../config/myApi.js';
	export default {
		data() {
			return {
				sortlist: [{
						name: '综合排序',
						disabled: false
					},
					{
						name: '好评优先',
						disabled: false
					},
					{
						name: '热度优先',
						disabled: false
					},
					{
						name: '销量优先',
						disabled: false
					},
				],
				value_sort: null, //排序
				showSort: false, //排序弹框
				ids: [], //类别筛选项
				isShowDropdown: false,
				typeArr: [{
					type: '课程类型',
					name: '类型'
				}, {
					type: '难度',
					name: '难度'
				}, {
					type: '部位',
					name: '部位'
				}, {
					type: 'more',
					name: '更多'
				}], //类型数组

				//工具栏选项
				courseBar: [],

				//工具栏类型选择
				type: null,
				//点击确认请求携带的数据
				courseCategory: [],

				// 具体选项内容列表
				courseTypeList: [{
						title: "热身放松",
						checked: true
					},
					{
						title: "健身操",
						checked: false
					},
					{
						title: "心肺训练",
						checked: false
					},
					{
						title: "心肺训练",
						checked: false
					},
					{
						title: "健康改善",
						checked: false
					},
				],
				selectList: [{
						title: '类型',
						options: [{
								label: '默认排序',
								value: 1,
							},
							{
								label: '距离优先',
								value: 2,
							},
							{
								label: '价格优先',
								value: 3,
							}
						],
					},
					{
						title: '难度',
						options: [{
								label: '去冰',
								value: 1,
							},
							{
								label: '加冰',
								value: 2,
							},
						],
					}
				],
				// 课程列表
				showType: false,
				src: "",
				flowList: [], //课程列表数据
				courseList: [{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘北国风光，千里冰封，万里雪飘',
						shop: '123',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
						isFree: false, //是否免费
						isBuy: false, //是否购买
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '1234',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
						isFree: false, //是否免费
						isBuy: true, //是否购买
					},
					{
						price: 661,
						title: '惜秦皇汉武，略输文采',
						shop: '500000',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
						isFree: true, //是否免费
						isBuy: false, //是否购买
					}
				],
				loadStatus: '查看更多',

				chooseList: '',
				page: 1,
				rows: 10,
				total: 0

			};
		},
		onLoad() {
			// this.addRandomData();
			this.getCourseBar();
			this.getCourseList();
		},
		watch: {
			value_sort(n, o) {
				switch (n) {
					case '综合排序':
						this.page = 1
						this.flowList = []
						this.getCourseList();
						break;
					case '好评优先': //grade
						this.flowList = this.flowList.sort((a, b) => {
							return a.grade - b.grade
						})
						break;
					case '热度优先': //courseWatchCount
						this.flowList = this.flowList.sort((a, b) => {
							return a.courseWatchCount - b.courseWatchCount
						})
						break;
					case '销量优先': //learnNum
						this.flowList = this.flowList.sort((a, b) => {
							return parseInt(a.learnNum) - parseInt(b.learnNum)
						})
						break;
				}
			}
		},
		onReachBottom() {
			if (this.page * this.rows < this.total) {
				this.page = this.page + 1
				this.getCourseList();
			}
		},
		methods: {
			serachCourseFn() {
				uni.navigateTo({
					url: '/pages/course/serachCourse'
				})

			},
			radioChange(e) {
				this.showSort = false
			},
			//获取工具栏
			getCourseBar() {
				API.getCourseType().then(res => {
					if (res.code) {
						if (res.code == 200) {
							let arr = []
							for (let key in res.result) {
								arr.push({
									name: key,
									items: res.result[key]
								})
							}
							this.courseBar = arr

							// res.result.more = [];
							// for(let keys in res.result){
							// 	if(keys != '课程类型'&&keys != '难度' &&keys != '部位'&&keys != 'more'){
							// 		res.result.more.push({keys:res.result[keys],name:keys})
							// 	}
							// }
							// this.courseBar = res.result;
							// console.log('课程type',	this.courseBar);
							// console.log('课程type',this.courseBar);
						}
					}
				})
			},
			getCourseList() {
				const pram = {
					page: this.page,
					rows: this.rows,
					courseCategory: this.ids.toString()
				};
				API.getCourse(pram).then(res => {
					if (res.code == 200) {
						this.total = Number(res.result.total)
						this.flowList = this.flowList.concat(res.result.rows);
					} else {
						uni.showToast({
							title: '获取列表错误',
							icon: 'none'
						})
					}
				})
			},
			//获取课程列表
			// getCourseList(data){
			// 	API.getCourseList(data).then(res=> {
			// 		if(res.code) {
			// 			if (res.code == 200) {
			// 				console.log('获取列表',res.result);
			// 				this.flowList = res.result;
			// 			}
			// 		}
			// 	})
			// },
			//选择标签
			tagClick(index, id) {
				console.log('塔尕唐', index, id)

				this.courseBar[this.type][index].isSelect = !this.courseBar[this.type][index].isSelect;

			},
			tagClickMore(id) {
				if (this.ids.length > 0) {
					this.ids.forEach((item) => {
						if (item == id) {
							this.ids = this.ids.filter(item2 => {
								return item2 != id
							})
						} else {
							this.ids.push(id)
						}
					})
				} else {
					this.ids.push(id)
				}
			},
			//重置选项
			resetOptions() {
				this.ids = []
				this.page = 1
				this.flowList = []
				this.isShowDropdown = false
				this.getCourseList()
			},
			// 确认选项并关闭下拉菜单
			confirmOptions() {
				this.page = 1
				this.flowList = []
				this.isShowDropdown = false
				this.getCourseList()
			},
			// 选择类型
			selectTypeHandle(type) {
				this.isShowDropdown = true,
					this.type = type;
			},
			sortFn() {
				this.showSort = true
				console.log(2222);
			},
			//关闭下拉菜单
			closeModel() {
				this.isShowDropdown = false;
			},
			// 获取新的排列方式
			getArrangement() {
				this.showType = !this.showType
			},
			// 课程列表
			addRandomData() {
				console.log("加载");
				this.loadStatus = '加载中';
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.courseList.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.courseList[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			//跳转详情
			toDetail(item) {
				let obj = {
					id: item.id,
					payStatus: item.payStatus
				}
				uni.navigateTo({
					url: '/pages/course/courseDetail?val=' + JSON.stringify(obj)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_img{
		overflow: hidden;
		height: 200rpx;
		border-radius: 5rpx;
		>image{
			width: 100%;
			border-radius: 5rpx;
		}
	}
	.paixu{
		top: 200rpx !important;
	}
	.serach_icon {
		margin-right: 32rpx;
	}

	@import "@/static/css/courseList2.scss";

	.u-radio-group {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		view {
			display: flex;
			padding: 10rpx 0;
			justify-content: space-between;
		}
	}

	u-radio {
		display: inline-block;
	}

	.top {}

	.kong {
		height: 4rpx;
		width: 100%;
		background: #f5f5f5;
	}

	.top-menu {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		z-index: 500000;

		// border-top: 2rpx solid #f5f5f5;
		// 菜单
		.top-menu-content {
			display: flex;
			justify-content: space-between;
			align-items: center;

			width: 100%;
			height: 100rpx;
			background-color: #fff;

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				background-color: #f9f9f9;
				padding: 12rpx 40rpx;
				border-radius: 12rpx;

				.name {
					font-size: 24rpx;
					color: #343434;
					margin-right: 10rpx;
				}
			}
		}

	}

	//下拉蒙层
	// .model {
	// 	position: fixed;
	// 	top: 100rpx;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	background-color: rgba(0, 0, 0, .5);
	// 	z-index: 5000;
	// }
	// ::v-deep.u-mask{
	// 	z-index: 1 !important;
	// }
	// 下拉菜单
	.slot-content {
		position: absolute;
		top: 200rpx;
		// left: 0;
		width: 100%;
		padding: 46rpx 30rpx 54rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 20px 20px;

		.select-button {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			// 重置样式,确认样式
			.reset-btn,
			.confirm-btn {
				width: 181rpx;
				height: 70rpx;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 70rpx;
				border-radius: 35rpx;
			}

			// 重置样式
			.reset-btn {
				color: #F4333C;
				border: 1px solid #F4333C;
			}

			// 确认样式
			.confirm-btn {
				color: #fff;
				background-color: #F4333C;
			}
		}

	}

	// 排序

	.right-sort {
		position: fixed;
		top: 260rpx;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 24rpx;
		height: 70rpx;
		background-color: #f9f9f9;
		z-index: 99;


		.left {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 120rpx;
			margin-right: 10rpx;

			::v-deep.u-iconfont::before {
				transform: scale(0.5);
			}
		}

		.sort-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;
		}

		::v-deep.list-dot {
			top: 6rpx !important;
			left: 8rpx !important;
			margin: 0 10px;
		}

	}

	//课程列表
	.course-content {
		padding-top: 174rpx;
		background: #f9f9f9;
		padding-bottom: 30rpx;
	}

	// 课程列表-第一种瀑布流的样式
	.demo-warter {
		border-radius: 14rpx;
		margin: 30rpx;
		background-color: #ffffff;
		position: relative;
		box-sizing: border-box;

		.course-list {
			padding: 16rpx;

		}

		// 作者
		.author {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			color: #fff;
			display: flex;

			.author-name {
				font-size: 20rpx;
				font-weight: 500;
				opacity: 0.6;
				margin-left: 14rpx;
			}
		}
	}


	::v-deep.u-wrap {
		background-color: #000;
	}

	::v-deep.u-lazy-item {
		width: 100%;
		height: 210rpx;
		background: #000000;
		opacity: 0.48;
		border-radius: 14px 14px 0px 0px;
		overflow: hidden;

		img {
			width: 100%;
			height: 210rpx;
		}
	}

	.view-more {
		margin-top: -28rpx;
	}

	.u-drawer {
		::v-deep .u-drawer-content {
			top: 100rpx !important;
		}
	}
</style>
